import { useState, useEffect } from "react";

import {
  Space,
  Form,
  Radio,
  Input,
  Button,
  Alert,
  Typography,
  Modal,
  message,
  Divider,
} from "antd";
import { req } from "@/common/methods";

const { Text } = Typography;

const DeleteComponent = (props: any) => {
  const { record, doClose } = props;
  // return <>这是delete{JSON.stringify(props || {})}</>;
  const [submitLoading, setSubmitLoading] = useState(false);
  const deleteSubmit = (values: any) => {
    setSubmitLoading(true);
    req(
      "/api/storage_delete",
      { ...values, id: record.id, doc_id: record.doc_id },
      "post"
    )
      .then((data: any) => {
        // Modal.destroyAll();
        // message.success("您已撤销该条数据");
        Modal.success({
          title: "撤销成功",
          content: (
            <>
              <div>已完成对以下数据的修改：</div>
              <>
                {Array.isArray(data?.message_data) &&
                  data.message_data.map((item: string) => (
                    <p key={item}>{"" + item}</p>
                  ))}
              </>
              {/* <pre>{data?.message_data}</pre> */}
              <div>请留意数量变动</div>
            </>
          ),
          onOk() {
            Modal.destroyAll();
            doClose();
          },
        });
      })
      .catch((error) => {
        Modal.error({
          title: "操作失败",
          content: <>无法撤销该数据，{"" + error}</>,
          onOk() {
            setSubmitLoading(false);
          },
          onCancel() {
            setSubmitLoading(false);
          },
        });
      });
  };
  const [goodsInfo, setGoodsInfo] = useState<any>({});
  useEffect(() => {
    req("/api/goods/get_one", { id: record.goods_id })
      .then((data) => {
        if (typeof data !== "object" || !data) {
          throw "无效的数据类型";
        }
        setGoodsInfo(data);
      })
      .catch((error) => {
        message.error("无法获取物品信息" + error);
      });
  }, []);
  return (
    <>
      <Alert
        message="只有当前物品没有再次被录入时才能撤销，若撤销整个单据，当有至少一个物品有再次录入的记录时，整个单据不可撤销。对于无法撤销的记录，可在相应的区域进行反向操作。"
        type="error"
        banner
        showIcon={false}
      />
      <div style={{ height: "20px" }}></div>
      <Form layout="vertical" onFinish={deleteSubmit}>
        <Form.Item
          name="delete_basis"
          label="撤销依据："
          rules={[{ required: true, message: "请选择撤销依据" }]}
        >
          <Radio.Group>
            <Radio value={1}>撤销该条数据[{record.id}]</Radio>
            <Radio value={2}>撤销整个单据下的所有数据:{record.doc_id}</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item>
          <Text>
            <Text strong>当前数据</Text>:<Text code>{goodsInfo.name}</Text>,
            <Text code>
              {goodsInfo.count}
              {` `}
              {goodsInfo.unit}
            </Text>
            <br />
          </Text>
          <Text>
            <Text strong>数量变动</Text>:<Text code>{record.before_count}</Text>
            {record.change_count > 0 ? " + " : " - "}
            <Text code>{Math.abs(record.change_count)}</Text>
            {` = `}
            <Text code>{record.after_count}</Text>
          </Text>
        </Form.Item>
        <Form.Item>
          <Text>
            撤销后数量将进行反向操作，并且
            <Text type="danger">相应的出入库记录将被删除，此操作不可逆</Text>
            ，您确定要撤销吗？
          </Text>
        </Form.Item>
        <Form.Item>
          <div
            style={{ display: "flex", gap: "15px", justifyContent: "flex-end" }}
          >
            <Button
              danger
              type="primary"
              htmlType="submit"
              loading={submitLoading}
              disabled={submitLoading}
            >
              确定
            </Button>
            <Button onClick={() => Modal.destroyAll()}>取消</Button>
          </div>
        </Form.Item>
      </Form>
    </>
  );
};
export default DeleteComponent;
